<template>
  <div class="payment-container">
    <div class="payment-card">
      <h3>支付订单</h3>
      <el-card>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="订单号">{{ order.id }}</el-descriptions-item>
          <el-descriptions-item label="课程名称">{{ order.course }}</el-descriptions-item>
          <el-descriptions-item label="课程价格">{{ order.price }}</el-descriptions-item>
          <el-descriptions-item label="应付金额">
            <el-input-number 
              v-model="paymentAmount" 
              :min="1" 
              :max="10000" 
              :precision="2" 
              placeholder="请输入支付金额"
              :value="parsePrice(order.price)"/>
          </el-descriptions-item>
        </el-descriptions>
        
        <div class="payment-methods">
          <h4>选择支付方式</h4>
          <el-radio-group v-model="paymentMethod">
            <el-radio label="alipay">
              <img src="../assets/alipay.png" alt="支付宝" class="payment-icon">
              支付宝
            </el-radio>
            <el-radio label="wechat">
              <img src="../assets/wechat.png" alt="微信支付" class="payment-icon">
              微信支付
            </el-radio>
          </el-radio-group>
        </div>
        
        <div class="action-buttons">
          <el-button type="primary" @click="submitPayment">确认支付</el-button>
          <el-button type="warning" @click="payLater">稍后支付</el-button>
          <el-button @click="goToOrderList">取消支付</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Payment',
  data() {
    return {
      order: {
        id: this.$route.params.id,
        course: '',
        price: ''
      },
      paymentMethod: 'alipay',
      paymentAmount: 0
    }
  },
  created() {
    // 从Vuex store获取订单详情
    const foundOrder = this.$store.state.orders.find(order => order.id === this.$route.params.id);
    if (foundOrder) {
      this.order = foundOrder;
      this.paymentAmount = this.parsePrice(foundOrder.price);
    }
  },
  methods: {
    payLater() {
      this.$message.success('已保存订单，您可以在订单管理中继续支付');
      this.$router.push('/dashboard/orders');
    },
    parsePrice(priceStr) {
      // 从价格字符串中提取数字
      const num = parseFloat(priceStr.replace(/[^\d.]/g, ''));
      return isNaN(num) ? 0 : num;
    },
    submitPayment() {
      if (!this.paymentAmount || this.paymentAmount <= 0) {
        this.$message.error('请输入有效的支付金额');
        return;
      }
      this.$confirm(`确认支付 ${this.paymentAmount} 元吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里应该调用支付API
        this.$message.success('支付成功');
        
        // 获取对应课程信息
        const courseMatch = /(\d+)/.exec(this.order.course);
        let courseId = null;
        
        if (courseMatch) {
          courseId = parseInt(courseMatch[1]);
        }
        
        // 更新订单状态
        this.$store.dispatch('updateOrderStatus', {
          id: this.order.id,
          status: '已完成'
        });
        
        // 如果找到了课程ID，添加到已购买列表
        if (courseId) {
          this.$store.dispatch('addPurchasedCourse', {
            id: courseId,
            name: this.order.course,
            purchaseDate: new Date().toISOString().split('T')[0]
          });
        }
        
        // 跳转到订单管理页面
        this.$router.push('/dashboard/orders');
      }).catch(() => {
        this.$message.info('已取消支付');
      });
    },
    goToOrderList() {
      this.$router.push('/dashboard/orders')
    }
  }
}
</script>

<style scoped>
.payment-container {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.payment-card {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.payment-card h3 {
  margin-bottom: 20px;
  color: #303133;
  font-size: 20px;
}

.payment-methods {
  margin: 20px 0;
}

.payment-methods h4 {
  margin-bottom: 15px;
  font-size: 16px;
  color: #606266;
}

.payment-icon {
  width: 24px;
  vertical-align: middle;
  margin-right: 10px;
}

.action-buttons {
  margin-top: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 10px;
}
</style>